<template>
	<view class="px-3 pb-10">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class=" " style="height: 500upx;">
			<block v-for="(item,index) in detail.imgs" :key="index">
				<swiper-item>
					<view class="swiper-item" ><image :src="baseUrl+item" style="height: 500upx;"></image></view>
				</swiper-item>
			</block>
		</swiper>
		<view class="row j-sb a-center" style="height: 65upx;margin-top: 20rpx;">
			<view class="font-lg font-weight-6" style="white-space: nowrap;overflow:hidden;text-overflow: ellipsis;">
				{{detail.title}}
			</view>
			<!-- <view @click="shareMessage()" class="main-bg-color-hui px-2" style="border-radius: 30upx 0 0 30upx;">
				分享
			</view> -->
		</view>
		<view class="">
			本商品为虚拟商品，无实体卡邮寄
		</view>
		<view class="row j-sb a-center">
			<view class="main-text-color">
				<text class="font-sm">￥</text>
				<text class="font-lg font-a">{{detail.price}}</text>
			</view>
			<view class="">
				销量：{{detail.sales}}
			</view>
		</view>
		<view class="line-through" style="color: #999;font-size: 24rpx;">价格：{{detail.f_price}}</view>
		<view class="row j-start py-3" style="padding-bottom: 0;">
			<view class="row a-center" style="width: 190upx;">
				<image src="../../static/nike.jpg" style="width:37upx;height: 36upx;"></image>
				<text class="ml_10">专业检查</text>
			</view>
			<view class="row a-center" style="width: 190upx;">
				<image src="../../static/nike.jpg" style="width:37upx;height: 36upx;"></image>
				<text class="ml_10">电子报告</text>
			</view>
		</view>
		<!-- <navigator url="../CheckUp/CheckUp" class="row j-sb  main-bg-color-hui p-2" style="">
			<text>体检机构</text>
			<text>></text>
		</navigator> -->
		<view class="row a-center py-3">
			<image src="../../static/laba.png" style="width: 37upx;height: 31upx;"></image>
			<text class="pl-1">体检时请告知店员在APP商城购买</text>
		</view>
		<view class="row j-sa" style="height: 80upx;border-bottom: 10rpx solid #f6f6f6;border-top: 1px solid #f6f6f6;padding-top: 10rpx;">
			<text @tap="display(1)" :class="{btna:btnnum == 1}">商品特色</text>
			<text @tap="display(2)" :class="{btna:btnnum == 2}">检测项目</text>
			<text @tap="display(3)" :class="{btna:btnnum == 3}">购买须知</text>
		</view>
		<view class="" style="padding-bottom:100upx;">
			<rich-text class="displaynone" :class="{dis:btnnum == 1}" :nodes="detail.content|formatRichText"></rich-text>
			<view class="displaynone" :class="{dis:btnnum == 2}">
				<block v-for="(item,index) in detail.medical_items" :key="index">
					<view class="checkitem">
						<image style="width: 26rpx;height: 22rpx;" src="../../static/item.jpg" mode=""></image>
						<view class="medical_items ml_20">
							<text>{{item.medical_items_attrname}}:</text>
							<text>{{item.medical_items_attrval}}</text>
						</view>
					</view>
				</block>
			</view>
			<rich-text class="displaynone" :class="{dis:btnnum == 3}" :nodes="detail.contentx|formatRichText"></rich-text>
		</view>
		<!-- <view class="cart_select" :class="{cannelTab:cannel == false}">
			<view class="cart_box">
				<view class="cart_select_back"></view>
				<view class="cart_select_box">
					<view class="cart_select_t">
						<image src="../../static/hone.jpg"></image>
						<view class="cart_p_info">
							<view class="main-text-color">
								<text class="font-sm">￥</text>
								<text class="font-lg">{{detail.price}}</text>
							</view>
							<view style="font-size:20upx;">周一至周日|免预约</view> -->
							<!-- <view style="font-size:20upx;">数量：{{detail.numbers}}</view> -->
						<!-- </view>
						<view class="cannel">
							<text class="iconfont" @tap="cannelTab()">&#xe605;</text>
						</view>
					</view> -->
					<!-- <view class="cart_select_m" v-if="showParams">
						<block v-for="(item,index) in detail.attrarrs" :key="index">
							<view class="cart_attrname">{{item.attrname}}</view>
							<view class="cart_attrs">
								<block v-for="(items,index) in item.attrvals" :key="index">
									<text>{{items}}</text>
								</block>
							</view>
						</block>
					</view>
					<view class="cart_select_b">
						<view class="px-3 row j-sb a-center" style="height: 133upx;">
							<text>数量</text>
							<view class="row text-center" style="height: 58upx;border: 1px solid #eeeeee;">
								<view class="" @tap="sum" style="width: 50upx;line-height: 58upx;border-right: 1px solid #eeeeee;">
									-
								</view>
								<view class="" style="width: 70upx;line-height: 58upx;">
									{{num}}
								</view>
								<view class="" @tap="add" style="width: 50upx;line-height: 58upx;border-left: 1px solid #eeeeee;">
									+
								</view>
							</view>
						</view>
					</view> -->
					<!-- <view class="sure_confirm">
						<view @tap="confirm()" class="text-center main-text-color-bai main-bg-color-cheng font-md">
							<text>
								确认
							</text>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- <view class="row a-center position-fixed bottom-0" style="width: 750upx;background-color: #ffffff;z-index:1;">
			<navigator open-type="switchTab" url="../index/index" class="flex-1 row flex-column a-center">
				<image src="../../static/hone.jpg" style="height: 48upx;width: 51upx;"></image>
				<text>首页</text>
			</navigator>
			<view class="flex-1 row flex-column a-center">
				<image src="../../static/kefu.jpg" style="height: 48upx;width: 51upx;"></image>
				<text>客服</text>
			</view>
			<view class="flex-2 row text-center" style="height: 68upx;border-radius: 34upx;color: #ffffff;overflow: hidden;">
				<view @tap="addcar()" class="px-3 flex-1" style="background-color: #ffa206;line-height: 68upx;">
					加入购物车
				</view>
				<view @tap="buynow()" class="px-3 flex-1" style="background-color: #ff6101;line-height: 68upx;">
					立即购买
				</view>
			</view>
		</view> -->
		<view class="row a-center position-fixed bottom-0 bottom" style="width: 750upx;background-color: #ffffff;z-index:1; padding: 15rpx 0;border-top: 1px solid #f6f6f6;left: 0;">
			<view class="bottom-left">
				<view @tap="toIndex" class="bottom-item">
					<image src="../../static/hone.jpg" style="height: 48upx;width: 51upx;"></image>
					<text>首页</text>
				</view>
				<view @tap="toCart" class="bottom-item">
					<image src="../../static/cart1.png" style="height: 46upx;width: 48upx;"></image>
					<text>购物车</text>
					<view v-if="carts.length" class="cart-num">
						{{carts.length}}
					</view>
				</view>
				<view class="bottom-item">
					<image src="../../static/kefu.jpg" style="height: 48upx;width: 51upx;"></image>
					<text>客服</text>
				</view>
			</view>
			<view class="bottom-btn">
				<view @tap="addcar()" class="bottom-btn-item" style="background-color: #ffa206;line-height: 80upx;">
					加入购物车
				</view>
				<view @tap="buynow()" class="bottom-btn-item" style="background-color: #ff6101;line-height: 80upx;">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	import jweixin from '@/common/lib/jweixin.js'//1.6.0
	export default {
		data() {
			return {
				carts: [],
				product_id:'',
				btnnum:1,
				baseUrl:request.common.baseUrl,
				detail:'',
				num:1,
				cannel:false,
				showParams:false,
				buyorcart:0,//1：购物车；2：买
				invite_code:''
			}
		},
		onLoad: function (option) {
			this.product_id=option.id
			uni.request({
				url: request.common.baseUrl+'/api/index/productDetail',
				data: {
					id:option.id
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						this.detail=res.data.data
						if(res.data.data.attrarrs[0].attrval){
							this.showParams=true
						}
					}
				}
			});
			if(uni.getStorageSync('keyToken')){
				uni.request({
					url: request.common.baseUrl+'/api/users/userinfos',
					data: {
						token:uni.getStorageSync('keyToken')
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							this.invite_code=res.data.data.invite_code
							uni.setStorageSync('keyMy_invite_code',res.data.data.invite_code)
						}
					}
				});
			}
			
		},
		onShow:function(){
			this.getMyCarts()
			var that=this
			var surl = encodeURIComponent(window.location.href.split('#')[0]); //据说可以解决URL中带参数的问题，前台用的js编码，后台php解码
			uni.request({  
				url: request.common.baseUrl+'/api/access/onShare',
				data: {
					url:surl
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				}, 
				success: res => {
					jweixin.config({  
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
						appId: res.data.data.appId, // 必填，公众号的唯一标识  
						timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳  
						nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串  
						signature: res.data.data.signature, // 必填，签名，见附录1  
						surl: res.data.data.surl, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确  
						jsApiList: ["updateAppMessageShareData"]  
					});
					
					
			
					  
				},  
				fail: (err) => {  
					console.log('request fail', err);  
				},  
				complete: () => {}  
			});
			jweixin.ready(function() {
				//自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）  
				jweixin.updateAppMessageShareData({  
					title: that.detail.title, // 分享标题  
					desc: "谷雨颐嘉体检产品", // 分享描述  
					link: window.location.href+'&invite_code='+uni.getStorageSync('keyMy_invite_code'), // 分享链接  
					imgUrl: that.baseUrl+that.detail.img, // 分享图标                                
					success: function() {  
						// 用户确认分享后执行的回调函数  
					},  
					cancel: function() {  
						// 用户取消分享后执行的回调函数  
					}  
				}); 
				
							
			});
		},
		methods: {
			toCart() {
				uni.switchTab({
					url:'/pages/car/car'
				})
			},
			toIndex() {
				uni.switchTab({
					url:'../index/index'
				})
			},
			cannelTab(){
				this.cannel = false;
			},
			sum(){
				if(this.num>1){
					this.num--;
				}
			},
			add(){
				this.num++;
			},
			display(v){
				this.btnnum = v
			},
			addcar(){
				this.cannel = true;
				this.buyorcart=1;
				this.confirm()
			},
			buynow(){
				this.cannel = true;
				this.buyorcart=2;
				this.confirm()
			},
			getMyCarts() {
				uni.request({
					url: request.common.baseUrl+'/api/cart/myCarts',
					data: {
						page: 1,
						token:uni.getStorageSync('keyToken')
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code == 200){
							this.carts = res.data.data
						}else{
							this.carts = []
						}
					}
				})
			},
			confirm(){
				if(uni.getStorageSync('keyToken')){
					if(this.buyorcart==1){
						let params='';
						for (var j = 0; j < this.detail.attrarrs.length; j++) {
							params=params+this.detail.attrarrs[j].attrval+';';
						}
						uni.request({
							url: request.common.baseUrl+'/api/cart/cartIn',
							data: {
								token:uni.getStorageSync('keyToken'),
								product_id:this.product_id,
								buy_num:this.num,
								params:params
								// store_id:uni.getStorageSync('keyStoreId')
							},
							header: {
								'Content-Type':'application/json;charset=UTF-8',
								'Content-Type':'application/x-www-form-urlencoded'
							},
							success: (res) => {
								if(res.data.code==200){
									this.getMyCarts()
									this.num=1
									this.cannel=false
									uni.showToast({
										title: '添加购物车成功',
										icon: 'none',
										duration: 2000
									});
								}else{
									uni.showToast({
										title: res.data.msg,
										icon: 'none',
										duration: 2000
									});
								}
							}
						});
					}else if(this.buyorcart==2){
						this.cannel=false
						uni.navigateTo({
							// url: '/pages/order/order?product_id='+this.product_id+'&buynums='+this.num+'&store_id='+uni.getStorageSync('keyStoreId')
							url: '/pages/order/order?product_id='+this.product_id+'&buynums='+this.num
						});
					}
				}else{
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
				// }else{
				// 	uni.showToast({
				// 	    title: '请选择体检机构',
				// 		icon: 'success',
				// 	    duration: 2000
				// 	});
				// }
			},
			// shareMessage(){
			// 	var that=this
			// 	var surl = encodeURIComponent(window.location.href.split('#')[0]); //据说可以解决URL中带参数的问题，前台用的js编码，后台php解码
			// 	uni.request({  
			// 		url: request.common.baseUrl+'/api/access/onShare',
			// 		data: {
			// 			url:surl
			// 		},
			// 		header: {
			// 			'Content-Type':'application/json;charset=UTF-8',
			// 			'Content-Type':'application/x-www-form-urlencoded'
			// 		}, 
			// 		success: res => {
			// 			jweixin.config({  
			// 				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
			// 				appId: res.data.data.appId, // 必填，公众号的唯一标识  
			// 				timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳  
			// 				nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串  
			// 				signature: res.data.data.signature, // 必填，签名，见附录1  
			// 				surl: res.data.data.surl, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确  
			// 				jsApiList: ["updateAppMessageShareData"]  
			// 			});
						
						
				
						  
			// 		},  
			// 		fail: (err) => {  
			// 			console.log('request fail', err);  
			// 		},  
			// 		complete: () => {}  
			// 	});
			// }
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText (html) { //控制小程序中图片大小
			    let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
			        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
			        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
			        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
			        return match;
			    });
			    newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
			        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
			        return match;
			    });
			    newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			    newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			    return newContent;
			}	
		}
	}
</script>

<style>
	@font-face {
	  font-family: 'iconfont';
	  src: url('@/static/font/iconfont.eot');
	  src: url('@/static/font/iconfont.eot?#iefix') format('embedded-opentype'),
		  url('@/static/font/iconfont.woff2') format('woff2'),
		  url('@/static/font/iconfont.woff') format('woff'),
		  url('@/static/font/iconfont.ttf') format('truetype'),
		  url('@/static/font/iconfont.svg#iconfont') format('svg');
	}
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 34upx;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	.btna{
		border-bottom: 1upx solid #2e76e7;
	}
	.displaynone{
		display: none;
	} 
	.dis{
		display: block;
	}
	.cart_select{
		position:fixed;
		z-index:2;
		left:0;
		bottom:0upx;
		height:100%;
		width:750upx;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.cart_box{
		position:relative;
		width:100%;
		height:100%;
	}
	.cart_select_back{
		/* background-color: rgba(0, 0, 0, 0.4); */
	}
	.cart_select_box{
		background-color:#FFFFFF;
		position:absolute;
		bottom:0;
		width:750upx;
	}
	.cart_select_t{
		width:700upx;
		height:200upx;
		margin:25upx 25upx 0;
	}
	.cart_select_t image{
		width:300upx;
		height:200upx;
		float:left;
	}
	.cart_p_info{
		float:left;
		width:350upx;
		height:200upx;
	}
	.cannel{
		width:50upx;
		height:200upx;
		float:right;
	}
	.cannel text{
		font-size:40upx;
	}
	.cart_select_m{
		width:700upx;
		margin:0 25upx;
	}
	.cart_select_m{
		width:700upx;
		margin:0 25upx;
	}
	.cart_attrname{
		
	}
	.cart_attrs{
		
	}
	.cart_attrs text{
		background-color:rgb(255, 97, 1);
		color:#FFFFFF;
		font-size:20upx;
		margin:0 10upx;
		border-radius:25upx;
		padding:5upx 15upx;
	}
	.cannelTab{
		display:none;
	}
	.sure_confirm{
		margin-bottom:20upx;
	}
	.sure_confirm view{
		width:700upx;
		margin:0 25upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
	}
	.sure_confirm text{
		height: 80upx;
		line-height: 80upx;
	}
	.font-a {
		font-family: Arial, Helvetica, sans-serif;
	}
	.ml_10{
		margin-left: 10rpx;
	}
	.medical_items {
		padding: 20rpx 0;
	}
	.checkitem {
		display: flex;
		align-items: center;
		border-bottom: 1px dashed #e3e3e3;
	}
	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.bottom-left {
		display: flex;
		align-items: center;
	}
	.bottom-item{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 20rpx;
	}
	.bottom-btn {
		display: flex;
		align-items: center;
		color: #FFFFFF;
		height: 80rpx;
		border-radius: 40rpx ;
		overflow: hidden;
		margin-right: 30rpx;
	}
	.bottom-btn-item {
		padding: 0 30rpx;
	}
	.cart-num{
		position: absolute;
		top: 0;
		right: 0;
		height: 30rpx;
		padding:  0 8rpx;
		line-height: 30rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #f43530;
		color: #fff;
		-webkit-transform: translate(40%,-20%);
		transform: translate(40%,-20%);
		font-size: 24rpx;
		box-sizing: border-box;
	}
</style>
